﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script src="js/jquery_2_1_min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/FastHttpApi.js"></script>
    <script src="js/api.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>FastHttpApi WebApplication</title>
</head>
<body>
    <div class="container bs-docs-container">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">FastHttpApi Chat room</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->

                </div><!-- /.container-fluid -->
            </nav>
            <form class="form-inline" style="padding-top:10px;" id="loginBar">
                <div class="form-group">
                    <label for="exampleInputName2">nickname</label>
                    <input type="text" class="form-control" id="userName" placeholder="nickname">
                </div>

                <button onclick="login()" type="button" class="btn btn-default">login</button>
            </form>
            <div class="row" style="margin-top:10px;">
                <div class="col-md-6" role="main">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="roomTitle">record</div>
                        <div class="panel-body">
                            <div id="lstTalk" style="height:500px;overflow: auto; overflow-x:hidden;">
                                <p v-for="item in Data" style="padding-top:4px;">
                                    [{{item.time}}]
                                    <span class="label label-default" style="margin-right:4px;">
                                        {{item.name}}
                                    </span>

                                    <span class="label label-success" v-if="item.type=='login'">
                                        {{item.message}}
                                    </span>
                                    <span class="label label-warning" v-else-if="item.type=='quit'">
                                        {{item.message}}
                                    </span>
                                    <span class="label label-info" v-else>
                                        {{item.message}}
                                    </span>
                                </p>
                            </div>
                            <form class="form-inline" id="talkBar">
                                <div class="form-group">
                                    <input type="text" style="width:300px;" class="form-control" id="talkMsg" placeholder="发言">
                                </div>
                                <button type="button" onclick="sendMessage()" class="btn btn-default">send</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" role="main">
                    <div class="panel panel-default">
                        <div class="panel-heading">User</div>
                        <div class="panel-body">
                            <div style="height:530px;overflow: auto; overflow-x:hidden;">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>nickname</th>
                                            <th>ipaddress</th>
                                        </tr>
                                    </thead>
                                    <tbody id="lstUser">
                                        <tr v-for="item in Data">
                                            <td>{{item.Name}}</td>
                                            <td>{{item.IP}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function receive(result) {
            if (result.Data.type == 'login' || result.Data.type == 'quit') {
                ChatListOnlinesAsync().execute(function (result) {
                    listUserControl.Data = result.Data;
                });
            }
            messages.push(result.Data);
            var objDiv = document.getElementById("lstTalk");
            objDiv.scrollTop = objDiv.scrollHeight;
        }

        async function sendMessage() {
            var msg = $('#talkMsg').val();
            if (!msg) {
                alert("enter message");
                return;
            }

            var result = await ChatTalk(nickName, msg);
            if (result.Code != 200)
                alert(result.Error);
            else
                $('#talkMsg').val('');

        }
        async function login() {
            nickName = $('#userName').val();
            if (!nickName) {
                alert("enter you name!")
                return;
            }
            var result = await ChatLogin(nickName);
            if (result.Code == 200) {
                $('#loginBar').hide();
                $('#talkBar').show();
            }
            else {
                alert(result.Error);
            }
        }
        var nickName;
        var messages = Array();
        var lstMessageControl;
        var listUserControl;
        $(document).ready(function () {
            api_receive(receive);
            api_disconnect(function () {
                $('#loginBar').show();
                $('#talkBar').hide();
            });
            $('#talkBar').hide();
            listUserControl = new Vue({ el: '#lstUser', data: { Data: [] } });
            lstMessageControl = new Vue({ el: '#lstTalk', data: { Data: messages } });
        });
    </script>
</body>

</html>